<template>
  <wanglei-tree ref="treeRef" :data="list" :load="load" show-checkbox :check-strictly="false"> </wanglei-tree>
  <wanglei-button @click="getSelectNode">获取高亮节点</wanglei-button>
  <wanglei-button @click="getCheckedNodes">获取勾选节点</wanglei-button>
  <wanglei-button @click="getHalfCheckedNodes">获取半勾选节点</wanglei-button>

</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'

function recursion(path = '0') {
  const list = [];
  for (let i = 0; i < 2; i += 1) {
    const nodeKey = `${path}-${i}`;
    const treeNode = {
      nodeKey,
      name: nodeKey,
      hasChildren: true,
      disabled: i % 2 === 0
    };
    list.push(treeNode);
  }
  return list;
}

export default defineComponent({
  setup() {
    const list = ref([])
    onMounted(() => {
      list.value = recursion()
    })

    const load = (node: any, callback: any) => {
      const result: any = []
      for (let i = 0; i < 2; i++) {
        const nodeKey = `${node.nodeKey}-${i}`
        const treeNode = {
          nodeKey,
          name: nodeKey,
          children: [],
          hasChildren: true
        }
        result.push(treeNode)
      }
      setTimeout(() => {
        callback(result)
      }, 1000)
    }

    const treeRef = ref()
    const getSelectNode = () => {
      console.log(treeRef.value.getSelectedNode());
    }
    const getCheckedNodes = () => {
      console.log(treeRef.value.getCheckedNodes());
    }
    const getHalfCheckedNodes = () => {
      console.log(treeRef.value.getHalfCheckedNodes());
    }
    return {
      list,
      load,
      treeRef,
      getSelectNode,
      getCheckedNodes,
      getHalfCheckedNodes
    }
  }
})
</script>

<style scoped>

</style>
